<template>
  <div>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in lunboList" :key="item.imgUrl">
        <img :src="item.imgUrl" alt="index">
      </mt-swipe-item>
    </mt-swipe>
    <gird></gird>
  </div>
</template>

<script>
  import {Swipe, SwipeItem, Toast} from 'mint-ui';
  import gird from "./Gird";
  export default {
    name: "Home",
    components:{
      gird
    },
    data() {
      return {
        lunboList: []
      }
    },
    created() {
      this.getLunbo();
    },
    methods: {
      getLunbo() {
        var that = this;
        setTimeout(function () {
          let list = [
            {
              imgUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4244989575,1153525447&fm=27&gp=0.jpg",
              text: "第一张图"
            },
            {
              imgUrl: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=237303599,3129559796&fm=27&gp=0.jpg",
              text: "第二张图"
            },
            {
              imgUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=457821692,2268204316&fm=27&gp=0.jpg",
              text: "第三张图"
            }
          ];
          that.lunboList = list;
          console.log(that.lunboList)
        }, 3000)
      }
    }

  }
</script>


<style scoped>
  .mint-swipe {
    height: 200px;
  }

  .mint-swipe-item:nth-child(1) {
    background: red;
  }

  .mint-swipe-item:nth-child(2) {
    background: yellow;
  }

  .mint-swipe-item:nth-child(3) {
    background: green;
  }

  img {
    width: 100%;
    height: 100%;
  }


</style>
